<template>
	<!-- 用车记录 -->
	<div class="my-approval-container">
		<nav-bar title="用车记录" :custom-back="true" />
		<!-- 搜索区域 -->
		<van-search v-model="search" placeholder="车牌号、司机、起点、终点" background="#f5f5f5" show-action @search="onSearch"
			@cancel="onCancel" />
		<!-- 日期筛选区域 -->
		<div class="apply-top">
			<div class="date-wrapper">
				<div class="date-display" @click="showStartPicker = true">
					<span class="date-value">{{ startTime ? formatStartTime : '开始时间' }}</span>
				</div>
				<span class="separator">~</span>
				<div class="date-display" @click="showEndPicker = true">
					<span class="date-value">{{ endTime ? formatEndTime : '结束时间' }}</span>
				</div>
			</div>

			<van-dropdown-menu active-color="#1768EF">
				<van-dropdown-item v-model="value1" :options="option1" :title="title1" @change="change1" />
			</van-dropdown-menu>
		</div>
		<!-- 开始时间弹框 -->
		<van-popup v-model="showStartPicker" position="bottom">
			<van-datetime-picker :value="startTime || new Date()" type="datetime" :max-date="endTime || undefined"
				@confirm="onStartTimeConfirm" @cancel="onStartTimeCancel" :min-date="minDate" />
		</van-popup>
		<!-- 结束时间弹框 -->
		<van-popup v-model="showEndPicker" position="bottom">
			<van-datetime-picker :value="endTime || new Date()" type="datetime" :min-date="startTime || minDate"
				@confirm="onEndTimeConfirm" @cancel="onEndTimeCancel" />
		</van-popup>
		<!-- 列表 -->
		<div class="case-list">
			<template v-if="list.length">
				<div v-for="item in list" :key="item.id" class="applyView" @click="goDetailTap(item.id)">
					<div class="applyTitle">
						<span class="typeName">{{ item.licenseNumber }}</span>
						<span class="applyContent">{{ item.applyUserName }}</span>
						<span class="applyContent">{{getStatusText(item.status)}}</span>
					</div>
					<div class="applyContent">
						<p>时间：{{ item.startTime }} 至 {{ item.endTime }}</p>
						<p>起点：{{ item.startingPoint }}</p>
						<p>终点：{{ item.dropOffPoint }}</p>
					</div>
				</div>
			</template>
		</div>
		<!-- 点击去顶部 -->
		<div class="goTop" v-if="showTopButton" @click="scrollToTop">
			<!-- <img src="path/to/your/icon.png" alt="Go to top" /> -->
		</div>
	</div>
</template>

<script>
	import utils from "@/utils/utils.js"
	import NavBar from '@/components/NavBar'
	export default {
		name: "UseCarRecord",
		components: {
			NavBar
		},
		data() {
			return {
				// 搜索框数据
				search: '',
				showTopButton: false,
				list: [{
						id: '1',
						departName: '技术部',
						applyUserName: '张三',
						licenseNumber: '京A12345',
						driverName: '李四',
						startTime: '2024-03-20 09:00',
						endTime: '2024-03-20 18:00',
						startingPoint: '北京市朝阳区',
						dropOffPoint: '北京市海淀区',
						dealStatus: 0,
						tripKilom: 20,
						status: 1
					},
					{
						id: '2',
						departName: '市场部',
						applyUserName: '王五',
						licenseNumber: '京B12345',
						driverName: '赵六',
						startTime: '2024-03-21 10:00',
						endTime: '2024-03-21 17:00',
						startingPoint: '北京市西城区',
						dropOffPoint: '北京市东城区',
						dealStatus: 4,
						tripKilom: 15,
						status: 2
					},
					{
						id: '3',
						departName: '市场部',
						applyUserName: '王五',
						licenseNumber: '京B12345',
						driverName: '赵六',
						startTime: '2024-03-21 10:00',
						endTime: '2024-03-21 17:00',
						startingPoint: '北京市西城区',
						dropOffPoint: '北京市东城区',
						dealStatus: 4,
						tripKilom: 15,
						status: 3
					},
					{
						id: '4',
						departName: '市场部',
						applyUserName: '王五',
						licenseNumber: '京B12345',
						driverName: '赵六',
						startTime: '2024-03-21 10:00',
						endTime: '2024-03-21 17:00',
						startingPoint: '北京市西城区',
						dropOffPoint: '北京市东城区',
						dealStatus: 4,
						tripKilom: 15,
						status: 4
					}
				],
				isLoading: true,
				total: null,
				hasNextPage: true,
				showTop: true,
				show: false,
				showCalendar: false,
				startTime: null,
				endTime: null,
				minDate: new Date(2020, 0, 1),
				title1: '状态',
				value1: '',
				value3: '',
				pageNum: 1,
				option1: [{
						text: '全部',
						value: ''
					},
					{
						text: '待审批',
						value: '0'
					},
					{
						text: '待接收',
						value: '1'
					},
					{
						text: '待出行',
						value: '2'
					},
					{
						text: '出行中',
						value: '3'
					},
					{
						text: '已完成',
						value: '4'
					},
					{
						text: '已冲突',
						value: '5'
					}
				],
				showStartPicker: false,
				showEndPicker: false,
				utils
			}
		},
		computed: {
			formatStartTime() {
				if (!this.startTime) return '';
				return utils.formatTime(this.startTime)
			},
			formatEndTime() {
				if (!this.endTime) return '';
				return utils.formatTime(this.endTime)
			}
		},
		methods: {
			/**
			 * 根据状态码获取对应的状态文本
			 * @param {number} status - 状态码
			 * @returns {string} 状态文本
			 */
			getStatusText(status) {
				const statusMap = {
					0: '待审批',
					1: '待接收',
					2: '待出行',
					3: '出行中',
					4: '已完成',
					5: '已冲突'
				}
				return statusMap[status] || ''
			},

			/**
			 * 开始时间确认处理
			 * @param {Date} time - 选择的时间
			 */
			onStartTimeConfirm(time) {
				this.startTime = time;
				this.showStartPicker = false;
			},

			/**
			 * 开始时间取消处理
			 */
			onStartTimeCancel() {
				this.showStartPicker = false;
			},

			/**
			 * 结束时间确认处理
			 * @param {Date} time - 选择的时间
			 */
			onEndTimeConfirm(time) {
				this.endTime = time;
				this.showEndPicker = false;
			},

			/**
			 * 结束时间取消处理
			 */
			onEndTimeCancel() {
				this.showEndPicker = false;
			},

			/**
			 * 状态选择变更处理
			 * @param {string} value - 选中的状态值
			 */
			change1(value) {
				const obj = this.option1.find(item => item.value === value)
				this.title1 = obj.text
				this.value1 = obj.value
				this.list = []
				this.pageNum = 1
				this.getAllList()
			},

			/**
			 * 搜索取消处理
			 */
			onCancel() {
				this.pageNum = 1
				this.search = ''
				this.list = []
				this.getAllList()
			},

			/**
			 * 搜索处理
			 */
			onSearch() {
				this.pageNum = 1
				this.list = []
				this.getAllList()
			},

			/**
			 * 获取列表数据
			 * @returns {Promise<void>}
			 */
			async getAllList() {
				// 如果正在加载中，则不重复请求
				if (this.isLoading) return;

				try {
					this.isLoading = true;
					this.list = this.pageNum === 1 ? mockData.rows : [...this.list, ...mockData.rows];
					this.total = mockData.total;
					this.hasNextPage = mockData.pageNum < mockData.totalPage;

				} catch (error) {
					this.$toast('获取数据失败');
				} finally {
					this.isLoading = false;
				}
			},
			//跳转到用车记录-详情
			goDetailTap(id) {
				console.log(id)
			},
			// 点击按钮去顶部
			scrollToTop() {
				window.scrollTo({
					top: 0,
					behavior: 'smooth'
				});
			},
			// 滚动后 显示按钮
			handleScroll() {
				this.showTopButton = window.scrollY > 20; // 当滚动超过100px时显示按钮
			}
		},
		created() {
			this.getAllList();
		},
		mounted() {
			// 监听滚动事件
			window.addEventListener('scroll', this.handleScroll);
		},
		beforeDestroy() {
			// 移除滚动事件
			window.removeEventListener('scroll', this.handleScroll);
		}
	}
</script>




<style lang="scss" scoped>
	.my-approval-container {
		background: #f5f5f5;
		height: calc(100vh - 50px);
		display: flex;
		flex-direction: column;
		margin-top:55px ;
	}

	/* 搜索框样式 */
	:deep(.van-search) {
		padding: 10px 12px;

		.van-search__content {
			background: #f7f7f7;
			border-radius: 4px;
		}
	}

	:deep(.van-cell) {
		background-color: #fff;
		padding-left: 10px;
	}

	/* 日期和状态选择区域 */
	.apply-top {
		background: #fff;
		padding: 12px;
		margin-top: 10px;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.date-wrapper {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.date-display {
		flex: 1;
		padding: 8px 12px;
		background: #f7f7f7;
		border-radius: 4px;
		color: #666;
		font-size: 14px;
	}

	.separator {
		padding: 0 8px;
		color: #999;
	}

	/* 状态选择器 */
	:deep(.van-dropdown-menu) {
		height: 48px;
		margin-left: 12px;

		.van-dropdown-menu__bar {
			background: #f7f7f7;
			border-radius: 4px;
		}

		.van-dropdown-menu__title {
			font-size: 14px;
			padding-right: 8px;
			color: #666;
		}
	}

	:deep(.van-dropdown-menu__title::after) {
		right: 0;
	}

	.case-list {
		padding-bottom: 20px;
		display: flex;
		justify-content: center;
		flex-direction: column;
	}

	.applyView {
		width: 96%;
		box-sizing: border-box;
		padding: 18px 18px 0;
		margin: 20px auto;
		background-color: white;
		text-align: left;
		border: 1px solid #CCCCCC;
	}

	.applyView:nth-last-child(1) {
		margin-bottom: 0;
	}

	.v1 {
		font-size: 24px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		line-height: 20px;
		color: #666666;
		justify-content: space-between;
		width: 100%;
	}

	.v1 image {
		width: 18px;
		height: 24px;
		margin-right: 10px;
		vertical-align: middle;
	}

	.goTop {
		position: fixed;
		bottom: 4%;
		right: 5%;
		width: 46px;
		height: 46px;
		z-index: 100;
	}

	.applyTitle {
		font-size: 18px;
		padding: 0 0 15px 0;
		color: #333333;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #DDDDDD;
	}

	.typeName {
		font-weight: 600;
	}

	.date {

		color: #999999;
	}


	.c1 {
		color: #FF8832;
	}

	.c2 {
		color: #45CC81;
	}

	.c3 {
		color: #7BB5F9;
	}

	.applyContent {
		font-size: 15px;
	}

	.applyContent text {
		display: block;
		margin-top: 20px;
		color: #666666;
	}

	.applyFooter {
		display: flex;
		justify-content: space-between;
		height: 40px;
		line-height: 40px;
		padding: 5px;
		background: #f1f2f6;
		color: #3993F7;
		font-size: 18px;
	}

	.applyFooter-left {
		display: flex;
	}

	.applyFooter .status {
		width: 80px;
		color: #45CC81;
		height: 40px;
		line-height: 40px;
		text-align: center;
	}

	.applyFooter .long {
		line-height: 40px;
		width: 120px;
		font-size: 16px;
		// background-color: skyblue;
	}

	.look-track {
		background: #3f84f1;
		font-size: 16px;
		color: #fff;
		padding: 0 4px;
		height: 32px;
		line-height: 32px;
		margin-top: 4px;
	}

	// 去顶部按钮
	.goTop {
		position: fixed;
		bottom: 4%;
		right: 5%;
		width: 46px;
		height: 46px;
		z-index: 100;
		background-color: #3f84f1;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
	}

	.goTop img {
		width: 24px;
		height: 24px;
	}
</style>